@extends('layout.default')
@section('stylesheet')
  <link href="//cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
@stop

@section('layout.content')


  <div class="row">
    <div class="col-xs-12">
      <h5 class="header green">
        新建培训发布方案（在线报名）
      </h5>
      <form class="form-inline" id="deploy-create" autocomplete="off">
        <div class="row">
          <div class="col-xs-12">
            <div class="form-group" style="padding-left:10px;">
              <label class="inline control-label b">方案名称：</label>
              <input class="form-control" type="text" name="name" value="" style="width:180px;" placeholder="培训发布方案名称">
              <label class="inline control-label b" style="padding-left:15px;">
                <i class="ace-icon fa fa-info-circle grey"></i> 报名限制：
              </label>
              <input class="form-control" type="text" name="limit" value="1" style="width:50px;">
              <button type="submit" class="btn btn-success deploy" style="margin-left:15px;">
                <i class="ace-icon fa fa-check"></i> 确定
              </button>
              <div class="form-group" style="padding-left:10px;">
                <label class="inline control-label b">备注：</label>
                <textarea rows="1" class="form-control" name="desc" placeholder="培训发布方案备注"></textarea>
              </div>
            </div>
          </div>
        </div>

        <div class="space-6"></div>
        <div class="row">
          <div class="col-xs-12">
            <table class="table table-hover table-striped table-bordered" id="deploy-table">
              <thead>
              <tr>
                <th class="center" style="width:50px;"> </th>
                <th class="center" style="width:120px;">培训类型</th>
                <th class="center" style="width:120px;">所属分支</th>
                <th class="align-middle" style="width:270px;">学期计划</th>
                <th class="center">门类</th>
                <th class="center">开设班级</th>
                <th class="center">计划招生</th>
                <th class="center">已报名</th>
              </tr>
              </thead>
              <tbody>
                @foreach ($terms as $term)
                  <tr class="terms">
                    <td class="center">
                        <input name="term" type="checkbox" data-termid="{{$term->id}}" data-typeid="{{$term->type->id}}" data-branchid="{{$term->branch->id}}" class="ace ace-checkbox-2 input-lg">
                        <span class="lbl"></span>
                    </td>
                    <td class="center">{{ $term->type->name }}</td>
                    <td class="center" >{{ $term->branch->name }}</td>
                    <td class="align-middle">{{ $term->name }}</td>
                    <td class="center" >{{ count($term->categories) }}</td>
                    <td class="center" >{{ count($term->clases) }}</td>
                    <td class="center" >{{ $term->clases->sum('number') }}</td>
                    <td class="center" >{{ count($term->users) }}</td>
                  </tr>
                  <tr class="detail-row">
                    <td colspan="8">
                      <table class="table table-hover table-striped table-bordered">
                        <thead>
                        <tr>
                          <th class="center" style="width:60px;">选择</th>
                          <th class="center">课程</th>
                          <th class="center">班级</th>
                          <th class="center" style="width:90px;">计划招生</th>
                          <th class="center" style="width:90px;">已报名</th>
                          <th class="center" style="width:90px;">额满限招</th>
                          <th class="center" style="width:90px;">入学考试</th>
                          <th class="center" style="width:90px;">上交作品</th>
                          <th class="align-middle" style="width: 150px;">上课时间</th>
                        </tr>
                        </thead>
                        <tbody>
                          @foreach ($term->categories as $category)
                            <?php
                              $count = count($category->clases);
                              if($count <= 0) $count = 1;
                              $rowspan = $count == 1 ? '' : "rowspan='{$count}'";
                              $clase = $category->clases->shift();
                            ?>
                              <tr>
                                <td class="center">
                                  @if(isset($clase))
                                    <input name="clase" type="checkbox" value="{{$clase->id}}" data-term="{{$term->id}}" class="ace ace-checkbox-2 input-lg">
                                    <span class="lbl"></span>
                                  @endif
                                </td>
                                <td class="center" {!! $rowspan !!}>{{ $category->name }}</td>
                                <td class="center" >{{ isset($clase)? $clase->name:'' }}</td>
                                <td class="center" >{{ isset($clase)? $clase->number:'' }}</td>
                                <td class="center" >{{ isset($clase)? count($clase->users):'' }}</td>
                                <td class="center" >
                                  @if(isset($clase))
                                  {!! $clase->present()->isLimited() !!}
                                  @endif
                                </td>
                                <td class="center" >
                                  @if(isset($clase))
                                  {!! $clase->present()->isExam() !!}
                                  @endif
                                </td>
                                <td class="center" >
                                  @if(isset($clase))
                                  {!! $clase->present()->isHandin() !!}
                                  @endif
                                </td>
                                <td class="align-middle" >{{ isset($clase)? $clase->classtime:'' }}</td>
                              </tr>
                              @if($rowspan != '')
                                @foreach($category->clases as $clase)
                                <tr>
                                  <td class="center">
                                      <input name="clase" type="checkbox" value="{{$clase->id}}" class="ace ace-checkbox-2 input-lg">
                                      <span class="lbl"></span>
                                  </td>
                                  <td class="center" >{{ $clase->name }}</td>
                                  <td class="center" >{{ $clase->number }}</td>
                                  <td class="center" >{{ count($clase->users) }}</td>
                                  <td class="center" >{!! $clase->present()->isLimited() !!}</td>
                                  <td class="center" >{!! $clase->present()->isExam() !!}</td>
                                  <td class="center" >{!! $clase->present()->isHandin() !!}</td>
                                  <td class="align-middle" >{{ $clase->classtime }}</td>
                                </tr>
                                @endforeach
                              @endif

                            @endforeach
                        </tbody>
                      </table>
                    </td>
                  </tr>

                @endforeach
              </tbody>
            </table>
          </div>
        </div>

      </form>
    </div>

  </div>

@stop

@section('javascript')

  <script src="//cdn.bootcss.com/jquery-validate/1.19.1/jquery.validate.min.js"></script>
  <script src="{{URL::asset('assets/js/jquery-validate-methods.js')}}"></script>
  <script src="//cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script src="//cdn.bootcss.com/moment.js/2.24.0/moment.min.js"></script>
  <script src="//cdn.bootcss.com/moment.js/2.24.0/locale/zh-cn.js"></script>
  <script src="//cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

  <script type="text/javascript">
    $(function () {

      var termid = 0;

      $(document).on('mouseenter', '.fa-info-circle', function () {
          idx = layer.tips('填 0 则报名不受限制！', '.fa-info-circle', {tips: [3,'#dd0000'], time: 0});
      }).on('mouseleave', '.fa-info-circle', function () {
          layer.close(idx);
      });


      $("input:checkbox[name='term']").on('click', function (e) {
          $("input:checkbox[name='term']").not(this).attr("checked", false);

          termid = $(this).data('termid');

          var $row = $(this).closest('tr');

          //if($row.is('.detail-row ')) return;
          $(this).parents('tbody').find('.terms').removeClass('b active bigger-110');

          if(this.checked){
            $('.detail-row').removeClass('open');
            $row.addClass('b active bigger-110');
            $row.next().addClass('open');
          }
          else{
            $row.next().removeClass('open');
          }

          /*一下方法也可*/
          /*if(this.checked){
            $('.detail-row').hide();
            $row.next().show();
          }
          else{
            $row.next().hide();
          }*/

      });


      $("input:checkbox[name='clase']").on('click', function (e) {

        $(this).parents('.detail-row').siblings().find("input:checkbox[name='clase']").prop('checked',false);

      });


      $("#deploy-create").validate({
          rules: {
              name: {required: true},
              limit: {
                  required: true,
                  digits: true,
                  minlength: 1,
                  maxlength: 1,

              },
              term:{required: true},
              clase:{required: true},
          },
          messages: {
              name: {required: "请填写发布方案名称"},
              limit: {
                  required: "请设置报名限制",
                  maxlength: "格式不正确",
                  minlength: "格式不正确",
                  digits: "格式不正确"
              },
              term:{required: "请选择培训计划"},
              clase:{required: "请选择报名班级"}
          },


          /* 失去焦点时不验证 */
          onfocusout: false,
          onkeyup: false,
          errorElement: 'div',
          errorClass: 'help-block',

          success: function (e) {
              $(e).closest('.form-group').removeClass('has-error');//.addClass('has-info');
              $(e).remove();
          },

          showErrors: function (errorMap, errorList) {
              $.each(errorList, function (i, v) {
                  layer.tips(v.message, v.element, {tips: [3,'#dd0000'], time: 2000});
                  return false;
              });

          },

          submitHandler: function (form) {
              var clases = new Array();
              $("input:checkbox[name='clase']:checked").each(function (i) {//把所有被选中的复选框的值存入数组
                  clases[i] = $(this).val();
              });

              $.post('{{route('train.deploy.store')}}', {
                  '_token': $("input[name='_token']").attr('value'),
                  'name': $("input[name='name']").val(),
                  'limit': $("input[name='limit']").val(),
                  'termid': termid,
                  'clases': clases,
                  'desc': $("textarea[name='desc']").val(),
                  'is_submit': true
              }, function (data) {
                  console.log(data);
                  layer.msg(data.message, {time: 2000,shift: -1}, function () {
                      if (data.status === true && data.url != null) {
                          $(window).attr('location', data.url);
                      }
                  });

              }, 'json').error(function (data) {
                  layer.msg(data.responseJSON.message);
              });
          }


      });



      $("input[name='begin']").datetimepicker({
          format: 'Y-M-D HH:mm'
      });

      $("input[name='end']").datetimepicker({
          format: 'Y-M-D HH:mm'
      });

    });
  </script>
@stop
